<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pixi测试</title>
   
    <style>
      [v-cloak] {
        display: none;
      } 
      body{
        margin: 0
      }
      .bg{
            width: 100vw;
            height: 100vh;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url(https://img.alicdn.com/imgextra/i4/826052692/O1CN01Ho8jJp1Vkyrj0QClq_!!826052692.png);
      }
      .s-btn{
          /* text-align: center; */
          height: 100vh;
          position: relative;
      }
      .s-img{
          width: 70%;
          transform: translate(-50%,-50%);
            top: 50%;
            left: 50%;
            position: relative;
      }
      .r-result{
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url(https://s3.bmp.ovh/imgs/2022/04/12/c3876721e5809954.png);
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        position: relative;
        width: auto;
        height: 60vh;
      }
      .r-line{
        position: relative;
        top: 16vh;
        text-align: center;
        font-size: 11vh;
        color: crimson;
        margin-top: 0;
        margin-bottom: 0;
        height: 16vh;
        font-family: cursive;
        font-weight: 800;
      }
      .r-btn{
        position: relative;
    text-align: center;
    top: 7vh;
      }
      .r-img{
        position: relative;
        height: 38vh;
      }

      
    </style>
</head>
<body>
    <div id="container" v-cloak>
        <div v-if="step===1" class="bg">
            <div @click="onStart" class="s-btn">
                <img src="https://s3.bmp.ovh/imgs/2022/04/12/4ba7d1b36ec01423.png" class="s-img" alt="">
            </div>
        </div>
        <div v-if="step===3" class="bg">
            <div class="r-result">
                <p class="r-line">{{finallyScore}}</p>
                <div @click="onStart" class="r-btn">
                    <img src="https://s3.bmp.ovh/imgs/2022/04/12/4ba7d1b36ec01423.png" class="r-img" alt="">
                </div>
            </div>
            
        </div>
        
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
     <script>
            window.app={};
            window.getApp = ()=>{
                return window.app
            }
     </script>
        <script type="module">
           
          // import adapter from './index.js';
           import Game from './Game.js';
           let app = window.app;
           new Vue({
             el: '#container',
             data:{
                step:1,
                finallyScore:0,
             },
             mounted(){
               console.log('mounted');
               let score = localStorage.getItem('score');
               if(score>0) {
                this.setData({
                    step:3,
                    finallyScore:score
                })

               }
             },
             methods: { 

                onStart(){
                    
                    this.touchs = 0;
                    this.game = new Game(window.innerWidth, window.innerHeight)
                    this.game.load().then(res => {
                        this.onMatch();
                        this.setData({
                            visible: true,
                            step:2,
                        })
                    })
                },
                setData(data){
                    Object.keys(data).forEach(k=>{
                        this[k]=data[k];
                    })
                },
                onUnload(){
                    // this.innerAudioContext.destroy();
                    this.game.destroy('silent');
                    this.setData({visible: false})
                },
                onHide(){
                    this.game.destroy();
                    this.setData({visible: false})
                },
                    getAudio(src){
                    // const innerAudioContext = wx.createInnerAudioContext()
                    // innerAudioContext.autoplay = true;
                    // innerAudioContext.volume = 0;
                    // innerAudioContext.src = src;
                    // this.innerAudioContext = innerAudioContext;

                    // return innerAudioContext;
                    },
                    decrease(){
                    // return request({api: 'decrease', data: {actId: app._redBagData.actId}});
                    },
                    
                    onMatch(e){
                    //const pk = e.detail; 
                    //  debugger
                  
                    const music = {
                        id: 1,
                        name: 'best holiday',
                        title: '带上牛奶 和我一起吧',
                        bpm: 96,
                        duration: 1000 * 57,
                    };
                    //const audio = this.getAudio(music.src[0]);
                    const audio = {};
                    /////////////////////////////////
                    ////测试方便跳过游戏
                    if(false){
                        this.decrease();
                         
                        window.app.$match.close();
                        this.setData({
                            gameVisible: true
                        });
                        
                        let score = {};
                        if(music.id == 1){
                        score = {score: 500, pkScore: 400}
                        }else{
                        score = {score: 400, pkScore: 500}
                        }
                        this.onGameEnd(score);
                        return;
                    }
                    //////////////////////////////////

                    console.log('Game.loader1::::', this.game.loaded)
                    // setTimeout(()=>{
                        if(this.game.loaded){
                            // app.$match.close();
                            this.setData({
                                gameVisible: true
                            });
                            //this.decrease(); //TODO:扣除次数
                            //this.taskInvite();
                            this.game && this.game.play((score,silent)=>{
                                this.onGameEnd(score,silent)
                            });
                        }else{
                        setTimeout(()=>{
                            this.game && this.game.play((score,silent)=>{
                            this.onGameEnd(score,silent)
                            });

                        }, 1000)
                        }
                    // }, 100)
                    },
                    onGameEnd(score,silent){
                        // app.$result.open(score);
                        if(this._isEnd) {
                            return
                        }
                        this._isEnd = true
                        console.log('onGameEnd',score,silent);
                        localStorage.setItem('score',score)
                        location.reload();
                        // this.setData({
                        //     step: 3,
                        //     finallyScore: score
                        // })
                    },
                    
                    onAgain(){
                        this.game.clean();
                        window.app.$result.close();
                        this.setData({
                            chapterVisible: false,
                            gameVisible: true
                        })
                    },
                    touchEvent(event){
                        //接收小程序的触摸事件传给PIXI
                        //PIXI.dispatchEvent(event);
                        if (this.game && event.changedTouches && event.changedTouches.length) {
                            const { x, y } = event.changedTouches[0];
                            switch (event.type) {
                            case 'touchstart':
                                this.game.onTouchStart(x , y );
                                this.touchs += 1;
                                break;
                            case 'touchmove':
                                this.game.onTouchMove(x , y);
                                break;
                            // case 'touchend':
                            //   this.game.onTouchEnd(x , y);
                            //   break;
                            }

                        }
                    }
             },
            
             watch:{
              
             }
           })
           console.log('after mounted');
        </script>
</body>
</html>